<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Button</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="css/uglyduck.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript"  src="js/uglyduck.js"></script>

<style type="text/css">

.zoom{
    font-size:2em;
}


body{
    font-family: simsun;
}
ul, li ,div,a,p{
    margin: 0px;
    padding:0px;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
}


#main{
    width:90%;
    height:800px;
    margin:auto;

}
#menu{
    width:100%;
    border:1px solid #000;
    
    height:80px;
    margin-bottom:20px;
    
}

#left-nav{
    float: left;
    position:fixed;
}
#right-content{
    width:80%;
    float: right;
}
#left-nav{
    width:15%;
}
#left-nav ul li{
  
    background: url(image/header.gif) repeat-x;
    padding:6px 0px 6px 0px;
    position:relative;
    text-align:center;
}
#left-nav ul li:hover{
    background: url(image/header_over.gif) repeat-x;
}


#left-nav ul li:hover ul{
    display:block;
}
#left-nav ul li a:hover{
    color:#f00;
}

.ex{
}
.code{
    border:1px dotted #aaa;
    background-color:#fafafa;
    color:green;
    padding:5px;
    margin-top:10px;
}
.sub{
    margin-left:10px;
}
.clear{
    clear:both;
}
pre{
    overflow: auto;
}
</style>
</head>
<body>

<div id="main">
<div id="menu"></div>
<div id="left-nav">
    <ul>
        <li><a href="#base">1.基本引用</a></li>
        <li><a href="#normal">2.一般状态</a></li>
        <li><a href="#form">3.表单</a></li>
        <li><a href="#event">4.事件</a></li>

    </ul>
</div>
<div id="right-content">
    
    <div class="item">
    <a id="#base"></a>
        <h2>1.基本引用:</h2>
        <div class="code">
            <p>首先将image里的btn-cir.png和btn-bg.png拷贝入images目录，没有images目录请先建立。然后在head标签里引入外联文件，
            注意目录要保持一致。</p>
            <pre>
            &lt;link href="css/uglyduck.css" rel="stylesheet" type="text/css" /&gt;
            &lt;script type="text/javascript"  src="js/uglyduck.js"&gt;&lt;/script&gt;
            </pre>
        </div>
    </div>
    
    <p></p>
    <div class="item">
    <a id="#normal"></a>
    <h2>2.一般状态:</h2>
    <div class="sub">
        <h3>a.一般大小</h3>
           <div class="ex">
           <a href="#" class="btn blue">bule</a>
           <a href="#" class="btn green">green</a>&nbsp;
           <a href="#" class="btn pink">pink</a>
           
           </div>
           <p class="clear"></p>
           
            <div class="code">
                <pre>
                &lt;a href="#" class="btn blue">bule&lt;/a&gt;&nbsp;
                &lt;a href="#" class="btn green"&gt;green&lt;/a&gt;&nbsp;
                &lt;a href="#" class="btn pink"&gt;pink&lt;/a&gt;
                </pre>
            </div>
        
    </div>
    <div class="sub">
        <h3>b.变大</h3>
           
           <div class="ex">
           <a href="#" class="btn blue zoom">bule</a>&nbsp;
           <a href="#" class="btn green zoom">green</a>&nbsp;
           <a href="#" class="btn pink zoom">pink</a>
           
           </div>
           <p class="clear"></p>
           
            <div class="code">
            <p>将button字体放大即可，默认是1em</p>
                <pre>
                &lt;style type="text/css"&gt;
                .zoom{
                    font-size:2em;
                }
                &lt;/style&gt;
                
                &lt;a href="#" class="btn blue zoom"&gt;bule&lt;/a&gt;&nbsp;
                &lt;a href="#" class="btn green zoom"&gt;green&lt;/a&gt;&nbsp;
                &lt;a href="#" class="btn pink zoom"&gt;pink&lt;/a&gt;
                </pre>
            </div>
        
    </div>
        <div class="sub">
        <h3>c.hover</h3>
           

            <div class="code">
            <p>默认都是.btn:hover { background-color: #a00; }.btn:active { background-color: #444; }所以可以改变hover active如下:</p>
                <pre>
                
                .btn:hover { background-color: #aaa; }.btn:active { background-color: #bbb; }
                </pre>
            </div>
        
    </div>
    
    </div>
    <p></p>
    <div class="item">
    <a id="#form"></a>
        <h2>3.表单:</h2>
        <div class="ex">
            <form method="post" action="#" id="form_id">
                <fieldset>
                    <legend>表单示例：</legend>
                    <div><input type="text" /></div>
                    <div><textarea cols="40" rows="10"></textarea></div>
                    <p><input type="Button" id="reset_btn" value="清除" class="btn" /> <input type="Submit" id="submit_btn" value="提交" class="btn pink" /></p>
                </fieldset>
            </form>
        
        </div>
        <div class="code">
            <p>设置ID，并在文档加载完时添加事件</p>
            <pre>
            &lt;input type="Button" id="reset_btn" value="清除" class="btn" /&gt; &lt;input type="Submit" id="submit_btn" value="提交" class="btn pink" /&gt;
            btn.addEvent(window,'load',function(){btn.formSubmit('submit_btn')});
            btn.addEvent(window,'load',function(){btn.formReset('reset_btn')});
            </pre>
        </div>
    </div>
    
        <p></p>
    <div class="item">
    <a id="#event"></a>
        <h2>4.添加事件:</h2>
        <div class="ex">
        <a href="#" id="show" class="btn blue">bule</a>
        </div>
        <p class="clear"></p>
        <div class="code">
            <p>先给button设置Id，然后再在文档流加载完时添加事件</p>
            <pre>
            &lt;a href="#" id="show" class="btn blue"&gt;bule&lt;/a&gt;
           $$().addEvent(window,'load',function(){$$().addEvent($$().getIdO("show"),'click',function(){alert("click")});});

            </pre>
        </div>
    </div>

</div>
</div>



</body>
</html>